<template>
<div class="layout-main">
  <div class="my-head">
		<img class="my-head-img" @click="goToPage('/my/info')" src="@/assets/header-img.png">
    <div class="name"  @click="goToPage('/my/info')">DoApiser</div>
    <div class="s-name"  @click="goToPage('/my/info')">一个专注前端开发的程序员</div>
    <div class="hover s-code"></div>
  </div>
  <div class="my-box w">
    <div class="my-li my-li-01 hover" @click="goToPage('/my/help')"><del></del>新手指导</div>
    <div class="my-li my-li-02 hover" @click="goToPage('/my/resource')"><del></del>我的资料</div>
    <div class="my-li my-li-03 hover" @click="goToPage('/my/activity')"><del></del>视频课堂</div>
    <div class="my-li my-li-04 hover" @click="goToPage('/my/setting')"><del></del>账号安全</div>
    <div class="my-li my-li-05 hover"><del></del>清除缓存</div>
    <div class="my-li my-li-06 hover" @click="goToPage('/my/about')"><del></del>关于</div>                
  </div> 	
</div>
</template>

<script>
export default {
  methods: {
    goToPage(_path){
     // this.$router.push({path: _path}); 
    }         
  }  
}
</script>
<style scoped>
.my-head{ position:absolute; width:7.5rem; height:4.52rem; background: url(../../assets/my-head.png) no-repeat 0 0; background-size:contain;}
.my-head-img{ width:1.2rem; height:1.2rem; float:left; margin:1.3rem 0.3rem 0 0.33rem;}
.my-head .name{ margin:1.4rem 0 0;font-size:0.38rem;  color:#fff; font-weight:bold;}
.my-head .s-name{ color:#fff; font-size:0.32rem;}
.s-code{ width:1rem; height:1rem; position:absolute; top:0; right:0;  background: url(../../assets/my-code.png) no-repeat center center; background-size:0.48rem;}
.my-box{ height:6.8rem; padding-top:0.2rem; position:relative; z-index:99; top:3.05rem; background: #FFFFFF;box-shadow: 0 4px 10px 0 rgba(56,58,61,0.10); border-radius: 0.12rem;}
.my-li{ height:1.1rem; background: url(../../assets/go-more.png) no-repeat 6.2rem 0.32rem; background-size:0.3rem 0.32rem; overflow:hidden; line-height:1.1rem; color:#3A3C3D;}
.my-li del{ float:left; width:0.88rem; height:0.6rem; margin-top:0.22rem;  background: url(../../assets/my-sm.png) no-repeat; background-size:0.6rem 3.6rem;}
.my-li:active{ background-color:#fafafa;}
.my-li-01 del{ background-position:0.2rem 0 }
.my-li-02 del{ background-position:0.2rem -0.6rem }
.my-li-03 del{ background-position:0.2rem -1.2rem }
.my-li-04 del{ background-position:0.2rem -1.8rem }
.my-li-05 del{ background-position:0.2rem -2.4rem }
.my-li-06 del{ background-position:0.2rem -3rem }
</style>